<template>
  <div class="data-statistics-container">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="query-data-card">
          <div class="card-title">
            <h3>短链查询</h3>
          </div>
          <el-form ref="queryShortStatisticsFormRef" :model="queryShortStatistics.formData">
            <el-row class="short-url-row">
              <el-col :span="20" class="select-group-box">
                <el-form-item prop="type" class="type-select-item">
                  <el-select v-model="queryShortStatistics.formData.type" placeholder="请选择" class="search-select">
                    <el-option label="短链查询" value="1"></el-option>
                    <el-option label="分组查询" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="f_id" class="group-select-item" v-if="queryShortStatistics.formData.type==='2'">
                  <el-select v-model="queryShortStatistics.formData.f_id" placeholder="请选择分组" class="group-select">
                    <el-option v-for="item in queryShortStatistics.groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="short_url" v-if="queryShortStatistics.formData.type==='1'"  class="short-url-input-item">
                  <el-input placeholder="请输入短链" v-model="queryShortStatistics.formData.short_url"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" class="search-btn-col">
                <el-button type="warning" :loading="queryShortStatistics.querying" @click="getShortStatistics">查询</el-button>
              </el-col>
            </el-row>
            <el-row class="query-data-card-footer">
              <el-col :span="13" class="query-data-short" v-if="queryShortStatistics.formData.type === '1'">
                <span>短链接：</span>
                <span>标题：</span>
                <span>原网址：</span>
              </el-col>
              <el-col :span="2" class="query-data-export-img">
                导出图片<img :src="imgRootSrc+'download_white_logo.png'" alt="download_logo">
              </el-col>
              <el-col :span="2" class="query-data-share-link">
                生成分享链接<img :src="imgRootSrc+'share_white_logo.png'" alt="share_logo">
              </el-col>
              <el-col :span="7" class="data-picker-col">
                <el-form-item prop="time">
                  日期选择
                  <el-date-picker
                    v-model="queryShortStatistics.formData.time"
                    type="daterange"
                    size="small"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
<!--      <el-col :span="16" v-if="queryShortStatistics.showResult">-->
      <el-col :span="16">
        <DataCurveChart ref="dataCurveChartRef"/>
        <MapPlugin ref="mapPluginRef"/>
        <el-row :gutter="24" class="access-source">
         <el-col :span="12">
           <el-card>
             <h3>高频访问 IP</h3>
             <div class="access-source-item">
               <span></span>
               <span></span>
             </div>
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card>
             <h3>访问来源 TOP5</h3>
<!--             <div class="access-source-item" v-for="(value,key) in shortUrlData.referer_data">-->
               <div class="access-source-item">
               <span>{{ key }}</span>
               <span>{{ value }}</span>
             </div>
           </el-card>
         </el-col>
        </el-row>
      </el-col>
<!--      <el-col :span="8" v-if="queryShortStatistics.showResult">-->
      <el-col :span="8">
        <div class="content-card">
          <el-card v-for="item in queryShortStatistics.accessType" :key="item.name">
            <div class="content-card-left">
              <div class="left-logo">
                <img :src="imgRootSrc+item.img+'.png'" :alt="item.img">
              </div>
              <div class="content-card-left-text">
                <span class="content-card-data">{{ item.data }}</span>
                <span class="content-card-title">{{ item.title }}</span>
              </div>
            </div>
          </el-card>
        </div>
        <OperatePieChart ref="operatePieChartRef"/>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, onBeforeUnmount, reactive } from 'vue'
import MapPlugin from '@/components/usersComponents/statistics/mapPlugin'
import OperatePieChart from '@/components/usersComponents/statistics/operatePieChart'
import DataCurveChart from '@/components/usersComponents/statistics/dataCurveChart'
import { getShort, shortStatistics } from '@/axios/userRequest'
const { proxy } = getCurrentInstance()

const imgRootSrc = '/img/data-statistics-images/'

// 查询短链数据
const queryShortStatistics = reactive({
  formData:{
    type: '1', // 1短链查询 2 短链分组查询
    f_id: '', // 短链组的主键id
    short_url: '', // 短链
    time: [] // 查询日期
  },
  groupList: [], // 分组列表
  querying:false, // 查询中
  showResult: false,// 显示查询结果
  shortUrlData: {},// 查询到的数据
  accessType: [// 访问类型
    { name:'today_visit_num', title: '今日访问人数', data: 0, img: 'eye_logo' },
    { name:'total_num', title: '累计访问人数', data: 0, img: 'time_logo' },
    { name:'is_wifi_num', title: 'Wifi访问人数', data: 0, img: 'wifi_logo' },
    { name:'is_not_wifi', title: '移动数据访问人数', data: 0, img: 'data_logo' }
  ]
})

// 获取短链分组
const getGroupList = async ()=>{
  const res = await getShort({ type: 2 })
  if(res.code === 0){
    res.data.short.unshift({ name: '默认分组', id: 0 })
    queryShortStatistics.groupList = res.data
  }else{
    proxy.$message.error(res.msg)
  }
}
// 查询
const getShortStatistics = async ()=>{
  if(queryShortStatistics.formData.time.length === 0) return proxy.$message.error('请选择日期')
  if(queryShortStatistics.formData.type === '1' && queryShortStatistics.formData.short_url === '') return proxy.$message.error('请输入短链')
  if(queryShortStatistics.formData.type === '2' && queryShortStatistics.formData.f_id === '') return proxy.$message.error('请选择分组')
  queryShortStatistics.querying = true
  const res = await shortStatistics(queryShortStatistics.formData)
  console.log(res)
  if(res.code === 0){
    queryShortStatistics.shortUrlData = res.data
    queryShortStatistics.showResult = true
    window.addEventListener('resize',resizeChart,false)
    queryShortStatistics.accessType.forEach(item=>{
      Object.keys(queryShortStatistics.shortUrlData).forEach(key=>{
        item.name === key ? item.data = queryShortStatistics.shortUrlData[key].count : ''
      })
    })
    console.log(queryShortStatistics.accessType)
  }else{
    proxy.$message.error(res.msg)
  }
  queryShortStatistics.querying = false
}
getGroupList()

const resizeChart = ()=>{
  proxy.$refs.dataCurveChartRef.chartResize()
  proxy.$refs.operatePieChartRef.chartResize()
  proxy.$refs.mapPluginRef.chartResize()
}

onBeforeUnmount(()=>{
  window.removeEventListener('resize',resizeChart)
})
</script>

<style lang="less" scoped>
.data-statistics-container {
  .el-card {
    border: none;
    margin-bottom: 24px;

    &:deep(.el-card__body){
      padding-left: 32px !important;
    }
  }
  .access-source{
    .el-col{
      .el-card{
        .el-card__body{
          .access-source-item{
            display: flex;
            justify-content: space-between;
            margin-top: 18px;
          }
        }
      }
    }
  }
  .query-data-card {
    border-radius: 52px 12px 12px 12px;
    background-color: @primary;
    color: #ffffff;
    &:deep(.el-card__body){
      .card-title {
        h3 {
          color: #ffffff !important;
        }
      }
      .el-form{
        .el-form-item{
          margin-bottom: 0;
        }
        .short-url-row {
          margin: 20px 0;
          .el-input{
            .el-input__inner{
              border-radius: 0 4px 4px 0;
              border: none;
            }
          }
          .el-select{
            .el-input__inner{
              border: none;
            }
          }
          .search-select{
            max-width: 200px;
            .el-input__inner{
              background-color: @warning;
              border-color: @warning;
              color: #FFFFFF;
              border-radius: 4px 0 0 4px;
            }
            .el-input__suffix{
              .el-input__suffix-inner{
                i{
                  color: #FFFFFF;
                }
              }
            }
          }
          .select-group-box{
            display: flex;
            .type-select-item{
              flex: 1 0 198px;
            }
            .group-select-item,
            .short-url-input-item{
              flex: 1 0 calc(100% - 198px);
            }
            .group-select-item{
              .el-form-item__content{
                .group-select{
                  width: 100%;
                  .el-input__inner{
                    background-color: #F3F5FA;
                    border-radius: 0 4px 4px 0;
                  }
                  .el-input__suffix{
                    .el-input__suffix-inner{
                      i{
                        color: @subtitle;
                      }
                    }
                  }
                }
              }
            }
          }
          .search-btn-col{
            text-align: right;
            .el-button {
              width: 136px;
              max-width: 136px;
              height: 40px;
            }
          }
        }
      }

      .query-data-card-footer {
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .el-col{
          display: flex;
          align-items: center;
          img{
            margin-left: 8px;
          }
          .el-date-editor {
            margin: 0 20px;
          }
        }
        .query-data-short{
          span{
            flex: 1;
          }
        }
        .query-data-export-img,
        .query-data-share-link{
          cursor: pointer;
        }
        .data-picker-col{
          justify-content: flex-end;
          .el-date-editor{
            margin: 0 0 0 20px!important;
          }
        }
      }
    }
  }

  .content-card {
    display: grid;
    grid-column-gap: 24px;
    grid-template-columns: 1fr 1fr;
  }
}
</style>
